<template>
  <div>
    <div class="find-title">
      发现
    </div>
    <div class="find-route">
      <router-link :to="`/find/list/${item.type}`"  tag="span" v-for="item in list" :key="item.id">{{item.title}}</router-link>
    </div>
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>

    <foot></foot>
  </div>
</template>

<script>
import find_title from '@/components/find/findhead.vue'
import foot from '@/components/common/foot.vue'
export default {
  data() {
    return {
      list:[
        {id:1 , type:"beauty" , title:"丽人"},
        {id:2 , type:"travel" , title:"旅游"},
        {id:3 , type:"movie" , title:"电影"},
      ]
    }
  },
  components:{
    foot,
  }
}
</script>

<style lang="scss" scoped>
  .find-route{
    margin-top: .1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: .3rem;
    background-color:rgb(170, 172, 243);
    span{
      border-radius: .05rem;
      text-align: center;
      width: .4rem;
      height: .2rem;
      line-height: .2rem;
      &.router-link-active{

        background-color: rgb(247, 206, 56);
        color: #000;
      }
    }
  }
</style>